<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<title>小程序助手</title>
		<meta name="keywords" content="小程序助手,小程序商城,微信小程序,小程序">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="apple-touch-icon" type="image/png" sizes="192x192" href="static/miniApp/img/logo/fonsoft-fav-192.png">
		<link rel="icon" type="image/png" sizes="192x192" href="static/miniApp/img/logo/fonsoft-fav-192.png">
		<link rel="shortcut icon" type="image/x-icon" sizes="16x16 32x32 64x64" href="static/miniApp/img/ico/favicon.ico" alt="favicon-icon">
		<link rel="stylesheet" href="static/miniApp/css/modelcss.css" />
		<link href="static/miniApp/css/index.css" rel="stylesheet" />
		<link href="static/miniApp/css/box_style.css" rel="stylesheet" />
		
		<script src="static/miniApp/js/jquery-1.7.1.min.js" type="text/javascript"></script>
		<script src="static/miniApp/js/bos_js.js" type="text/javascript"></script>
		<script type="text/javascript" src="static/miniApp/js/jquery.form.js"></script>
		<script type="text/javascript" src="static/miniApp/js/navanimated.js" ></script>
		<script type="text/javascript" src="static/miniApp/js/scroll.js" ></script>
		<script type="text/javascript">
			$(function(){
				var thatt = $(window).scrollTop();
	        	console.log("-----"+thatt+"------");
				if(thatt>0){
					$(".stuta-1").show();
	        	 	$(".stuta-2").hide();
	        	 	$(".stuta-1-text").css("color","#000");
	        	 	$(".header-model").css("background-color","#fff");
	        	 	$(".search-box").css({
						"border-color":"#ebebeb",
						"background-color":"rgba(0,0,0,0.0)"
					});
					$(".search-box input").css("color","#585858");
					$(".sign-box #header-login").css("background-color","#000")
//	        	 	if(thatt>=215){
//	        	 		$(".search-box").hide();
//	        	 	}else{
//	        	 		$(".search-box").hide();
//	        	 	}
				}else{
					$(".search-box").css({
						"border-color":"#fff",
						"background-color":"rgba(0,0,0,0.4)"
					});
					$(".search-box input").css("color","#fff");
					$(".stuta-1").hide();
					$(".stuta-2").show();
					$(".stuta-1-text").css("color","#FFFFFF");
					$(".sign-box #header-login").css("background-color","#00ca9b")
				}
				var move
				/* var timer = setInterval(scroll,2000) */
				var bannerinput = $(".banner-box .banner ul li").find("input")
				
				var hothtml = $("#rank-hot ul").html();
				var porjectapphtml = $("#porject-app .porject-app-content ul").html();
				var porjectthemehtml = $("#porject-theme .porject-theme-content ul").html();
				var navhtml = $("#nav ul").html();
				var apphtml = $("#app ul").html();
//				console.log(html);
				$("#nav ul li").bind("click",function(){
					$(this).addClass("nav-click").siblings().removeClass("nav-click").parents("#nav").find("span").removeClass("nav-click")
				})
				$("#nav span").bind("click",function(){
					$(this).addClass("nav-click").parent("#nav").find("li").removeClass("nav-click")
				})
			}) 
			
			
			$(window).scroll(function(){
				var that = $(this).scrollTop();
//	        	console.log(that);
//				var nav =$("#nav").offset().top;
//				console.log(nav);
	        	if(that>0){
	        	 	$(".stuta-1").show();
	        	 	$(".stuta-2").hide();
	        	 	$(".stuta-1-text").css("color","#000");
	        	 	$(".header-model").css("background-color","#fff");
	        	 	$(".search-box input").css("color","#585858");
	        	 	$(".sign-box #header-login").css("background-color","#000");
	        	 	$(".search-box").css({
						"border-color":"#ebebeb",
						"background-color":"rgba(0,0,0,0.0)"
					})
	        	}else{
	        		$(".stuta-1").hide();
	        	 	$(".stuta-2").show();
	        	 	$(".stuta-1-text").css("color","#fff");
	        	 	$(".header-model").css("background-color","rgba(255,255,255,0)");
	        	 	$(".search-box input").css("color","#fff");
	        	 	$(".sign-box #header-login").css("background-color","#00ca9b");
	        	 	$(".search-box").css({
						"border-color":"#fff",
						"background-color":"rgba(0,0,0,0.4)"
					})
	        	}
//	        	if(that>=215){
//	        		$(".search-box").show();
//	        	}else{
//	        		$(".search-box").hide();
//	        	}
	        	if(that>=495){
	        		$(".header-model").css("border-bottom-width","1px")
	        	} else{
	        		$(".header-model").css("border-bottom-width","0")
	        	}
	        	if(that>1002){
//	        		console.log("---ok---")
					$(".nav-flex").addClass("fiex");
					$("#app").css("margin-top","82px");
	        	}else{
	        		$(".nav-flex").removeClass("fiex");
	        		$("#app").css("margin-top","12px");
	        	}
			})
		</script>
	</head>
	<body>
		<header class="header-model">
			<div class="header-box content-size ">
				<img src="static/miniApp/img/logo/logo.png" height="40px" class="stuta-1" />
				<img src="static/miniApp/img/logo/logo-2.png" height="40px" class="stuta-2"/>
				<div class="search-box">
					<!-- <input type="text" placeholder="小程序关键字搜索" class="flex-1"/>
					<button class="search-button"></button> -->
					<form id="form" name="f" action="app/appSearchPro" class="search-fm" method="post" style="width:100%">
						<span class="bg s_ipt_wr quickdelete-wrap" style="display:flex;height:100%">
							<div id="kw_tip" style="width: initial; margin-left: 38px; max-width: 497px; display: none;" unselectable="on" onselectstart="return false;" class="s_ipt_tip"></div>
							<input id="kw" name="keywords" placeholder="小程序关键字搜索" class="s_ipt flex-1" value="" maxlength="255" autocomplete="off" style="flex:1">
							<span class="search-button" onclick="searchFormSubmit();"></span>
						</span>
					</form>
				</div>
				<div class="flex-1"></div>
				<button class="send-button" id="publishBth">发布小程序</button>
				<div class="sign-box logo">
					<!-- <button class="sign stuta-1-text">注册</button>
					<button class="sign">登录</button> -->
					<c:if test="${!empty loginName }">
						<%-- <span class="loginName">您好，${loginName}, <a id="logout" href="miniapp/logout">注销</a></span> --%>
						<a class="header-user-pic" href="miniapp/myapp"><img src="uploadFiles/uploadImgs/userphoto/${miniappLoginApp.icon }" /></a>
					</c:if>
					<c:if test="${empty loginName }">
						<!--<a id="header-login" class="header-login">登录</a>
						<a id="header-register" class="header-register">注册</a> -->
						 <button class="sign stuta-1-text" id="header-register">注册</button>
						<button class="sign" id="header-login">登录</button>
					</c:if>
				</div>
			</div>
		</header>
		<div class="banner-box">
			<div class="banner">
				<ul>
					<li><img src="static/miniApp/img/banner/banner-1-max.jpg" name="0"/>
						<div class="banner-search-box" hidden>
							<!--  <p>小程序助手，可帮你开发小程序</p>-->
							<div class="search">
								<input name="keywords" type="text" placeholder="小程序关键字搜索" id="searchProductName"/>
								<button class="search-button" onclick="searchProduct();"></button>
							</div>
						</div>
					</li>
					<!-- <li><img src="static/miniApp/img/demo-theme.jpg" name="1"/></li>
					<li><img src="static/miniApp/img/banner/banner-1-max.jpg" name="2"/></li>
					<li><img src="static/miniApp/img/demo-theme.jpg" name="3"/></li>
					<li><img src="static/miniApp/img/banner/banner-1-max.jpg" name="4"/></li> -->
				</ul>
			</div>
			<!-- <div class="point-box">
				<div class="point content-size">
					<ul>
						<li class="click"><img src="static/miniApp/img/banner/banner-1-max.jpg" height="100%" width="100%"/></li>
						<li><img src="static/miniApp/img/banner/banner-1-max.jpg" height="100%" width="100%"/></li>
						<li><img src="static/miniApp/img/banner/banner-1-max.jpg" height="100%" width="100%"/></li>
						<li><img src="static/miniApp/img/banner/banner-1-max.jpg" height="100%" width="100%"/></li>
						<li><img src="static/miniApp/img/banner/banner-1-max.jpg" height="100%" width="100%"/></li>
					</ul>
				</div>
			</div> -->
		</div>
		<div class="content-box content-size">
			<!--左列表-->
			<div class="content-box-left">
				<!--小程序推荐-->
				<div class="porject-box margin-top-30" id="porject-app">
					<div class="porject-title">
						<div class="line"></div>
						<p>为您推荐</p>
						<div class="line"></div>
					</div>
					<div class="porject-app-content  margin-top-30">
						<ul>
							<c:forEach items="${tuijianApps}" var="var" varStatus="vs">
							<li onclick="window.location.href='<%=basePath %>app/detail?ID=${var.ID}'">
							<%-- <a class="miniapp__link" href="<%=basePath %>app/detail?ID=${var.ID}"  target="_blank"> --%>
								<div class="porject-img"><img class="miniapp-header__app-icon" src="<%=basePath %>uploadFiles/uploadImgs/pc/${var.PROD_ICON}" width="100%" height="100%" /></div>
								<p>${var.PROD_NAME }</p>
							<!-- </a> -->
							</li>
							</c:forEach>
						</ul>
						<div style="clear: both;"></div>
					</div>
				</div>
				<!--专题推荐-->
				<div class="porject-box margin-top-30" id="porject-theme">
					<div class="porject-title" hidden>
						<div class="line"></div>
						<p>大家正在关注</p>
						<div class="line"></div>
					</div>
					<div class="porject-theme-content  margin-top-30">
						<ul>
							<c:forEach items="${guanzhuAlbums}" var="var" varStatus="vs">
								<li onclick="window.location.href='<%=basePath %>app/productlistByTheme?childAppds=${var.childapps}&albumid=${var.id }'"><div class="theme-img"><img src="<%=basePath %>uploadFiles/uploadImgs/pc/album/min/${var.minpic}" width="100%" height="100%"></div></li>
							</c:forEach>
						</ul>
						<div style="clear: both;"></div>
					</div>
				</div>
				<!--导航条-->
				<div class="nav-flex">
				<div class="porject-box margin-top-30 nav-box" id="nav">
					<span class="all nav-click" onclick="javascript:sendData();">全部</span>
					<div class="nav">
						<ul>
							<!-- <li class=""><a href="javascript:sendData(0)">热门排行</a></li> -->
							<c:forEach items="${varList}" var="var" varStatus="vs">
								<li class="" onclick="sendData('${var.ID }');">${var.NAME}</li>
							</c:forEach>
						</ul>
					</div>
					<div class="nav-button">
						<button class="navto-button" id="nav-left"></button>
						<button class="navto-button click" id="nav-right"></button>
					</div>
				</div>
				</div>
				<!--小程序-->
				<div  class="porject-box margin-top-18 index-content" id="app">
					<form  action="app/appIndexList" method="post" id="list_form">
					<div class="miniapp-list-content">
					</div>
					 <input type="hidden" id="COLUMN_ID" name="COLUMN_ID"  value=""/>
					 <input type="hidden" id="currentPage" name="currentPage"  value="0"/>
					 <input type="hidden" id="showCount" name="showCount"  value="30"/>
					</form>
					<div style="clear: both;"></div>
				</div>
			</div>
			<!--右列表-->
			<div class="content-box-right">
				<div class="rank-box margin-top-20 box-shadow" id="rank-banking">
					<div class="title">口碑榜</div>
					<ul>
						<c:forEach items="${koubeiList}" var="var" varStatus="vs">
						<li  onclick="window.location.href='<%=basePath %>app/detail?ID=${var.ID}'">
							<img width="100%" height="100%" src="<%=basePath %>uploadFiles/uploadImgs/pc/${var.PROD_ICON}" />
							<div class="information">
								<p>${var.PROD_NAME }</p>
								<div class="star">
									<c:choose>
										<c:when test="${var.STAR == '5'}">
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
										</c:when>
										<c:when test="${var.STAR == '4'}">
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i></i>
										</c:when>
										<c:when test="${var.STAR == '3'}">
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i></i>
											<i></i>
										</c:when>
										<c:when test="${var.STAR == '2'}">
											<i class="i"></i>
											<i class="i"></i>
											<i></i>
											<i></i>
											<i></i>
										</c:when>
										<c:when test="${var.STAR == '1'}">
											<i class="i"></i>
											<i></i>
											<i></i>
											<i></i>
											<i></i>
										</c:when>
										<c:otherwise>
											<i></i>
											<i></i>
											<i></i>
											<i></i>
											<i></i>
										</c:otherwise>
									</c:choose>
								</div>
							</div>
						</li>
						</c:forEach>
					</ul>
				</div>
				<div class="rank-box margin-top-20 box-shadow" id="rank-hot">
					<div class="title">热门榜</div>
					<ul>
						<c:forEach items="${remenList}" var="var" varStatus="vs">
						<li onclick="window.location.href='<%=basePath %>app/detail?ID=${var.ID}'">
							<img width="100%" height="100%" src="<%=basePath %>uploadFiles/uploadImgs/pc/${var.PROD_ICON}" />
							<div class="information">
								<p>${var.PROD_NAME }</p>
								<div class="star">
									<c:choose>
										<c:when test="${var.STAR == '5'}">
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
										</c:when>
										<c:when test="${var.STAR == '4'}">
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i></i>
										</c:when>
										<c:when test="${var.STAR == '3'}">
											<i class="i"></i>
											<i class="i"></i>
											<i class="i"></i>
											<i></i>
											<i></i>
										</c:when>
										<c:when test="${var.STAR == '2'}">
											<i class="i"></i>
											<i class="i"></i>
											<i></i>
											<i></i>
											<i></i>
										</c:when>
										<c:when test="${var.STAR == '1'}">
											<i class="i"></i>
											<i></i>
											<i></i>
											<i></i>
											<i></i>
										</c:when>
										<c:otherwise>
											<i></i>
											<i></i>
											<i></i>
											<i></i>
											<i></i>
										</c:otherwise>
									</c:choose>
								</div>
							</div>
						</li>
						</c:forEach>
					</ul>
				</div>
			</div>
		</div>
		<%@ include file="footer.jsp"%>

		<div class="box_view" id="box-view">
			<div class="box_login">
				<div class="box_login_nav">
					<ul>
						<li class="click" id="login">登录</li>
						<li id="register">注册</li>
					</ul>
				</div>
				<!--登录-->
				<input class="input_box admin login" placeholder="用户名" name='login_name' id="login_name" type="text">
				<input class="input_box password login" placeholder="密码" name='login_pwd' id="login_pwd" type="password">
				<input type="hidden" name="opetype" id="opetype" value="0" /> 
				<!--注册-->
				<input class="input_box admin register" placeholder="邮箱地址" name='email' id="email" type="text">
				<input class="input_box name register" placeholder="账号"  name='name' id="name" type="text">
				<input class="input_box password register" placeholder="密码" name='reg_pwd' id="reg_pwd" type="password">
				<input class="input_box password register" placeholder="密码确认" id="sureid" type="password">
				<button class="box_button" onclick="logindo();">登录</button>
			</div>
			<div class="box_view_bg"></div>
		</div>
	</body>
	
  <script type="text/javascript">
  
  
  $(function(){
	sendData();
	});

		function nextPage(page){
			$("#currentPage").val(page);
			var columnid=$("#COLUMN_ID").val();
			sendData(columnid);	
		}

	function sendData(cid){
		$("#COLUMN_ID").val(cid);
		$("#list_form").ajaxForm().ajaxSubmit({
			  success:function(result) {
			   	$(".miniapp-list-content").html(""); 
				 $(".miniapp-list-content").append(result); 
			   },
			   error:function(XMLHttpRequest, textStatus,errorThrown) {
				 $(".miniapp-list-content").html(""); 
				 return false;
			  }
		});
	}
		
  $(document).keypress(function(e){
  	if(e.which == 13){
  		jQuery(".confirmButton").click();
  	}
  });
  
  
	$("#header-login,#header-register").click(function(){
		if($("#box-view").css("display") == "none"){
			$("#box-view").show();
		}else{
			$("#box-view").hide();
		}
	});
	

	$("#publishBth").click(function(){
		var loginName = "${loginName}";
		if(loginName == null || loginName == undefined || loginName == ''){
			if($("#box-view").css("display") == "none"){
				$("#box-view").show();
			}else{
				$("#box-view").hide();
			}
		}else{
			window.location.href='<%=basePath%>miniapp/jumppublish';
		}
	});

	$("#myapp").click(function(){
		window.location.href='<%=basePath%>miniapp/myapp';
	});
	$(".box_view_bg").click(function(){
		$("#box-view").hide();
	});
	
	$(".header-nav ul li").click(function(){
		$(this).siblings().removeClass("active");
		$(this).addClass("active");
	});
	
	$("#nav-tab").click(function(){
		if($(".header-nav").css("overflow")=="hidden"){
			$(".header-nav").css("overflow","visible");
		}else{
			$(".header-nav").css("overflow","hidden");
		}
	});
	
	
	$("#header-register").click(function(){
		$(".box_login_nav ul li").removeClass("click");
		$("#register").addClass("click");
		$(".register").show();
		$(".login").hide();
		$("#opetype").val(1);
	});
	$("#header-login").click(function(){
		$(".box_login_nav ul li").removeClass("click");
		$("#login").addClass("click");
		$(".login").show();
		$(".register").hide();
		$("#opetype").val(0);
	});
	
	function searchProduct(){
		var searchName = $("#searchProductName").val();
		$("#kw").val(searchName);
		document.getElementById("form").submit();
	}

	function searchFormSubmit(){
		document.getElementById("form").submit();
	}
</script>
</html>
